CSS Custom Highlight API: Behersk Multipel Tekstmarkering for Dynamiske UI'er

CSS Custom Highlight API'en er et kraftfuldt nyt værktøj for webudviklere, der giver mulighed for hidtil uset kontrol over tekstmarkering og fremhævning inden for webapplikationer. I modsætning til de grundlæggende browser markeringsfunktioner, giver denne API udviklere mulighed for at definere brugerdefinerede fremhævningsstile og administrere flere markeringsområder programmatisk. Dette åbner op for en verden af muligheder for at skabe rige, interaktive og tilgængelige brugergrænseflader. Denne guide giver et omfattende overblik over API'en, udforsker dens muligheder, anvendelsestilfælde og implementeringsdetaljer, alt sammen med et globalt perspektiv.

Forståelse af det grundlæggende i CSS Custom Highlight API

Før du dykker ned i komplekse scenarier, er det vigtigt at forstå de grundlæggende koncepter i API'en. Kernen i CSS Custom Highlight API'en introducerer flere nye CSS pseudo-elementer, herunder:

• ::selection: Repræsenterer den del af et dokument, der er blevet valgt af brugeren. Dette har været tilgængeligt i lang tid, hvilket giver mulighed for grundlæggende styling af tekstmarkeringer.
• ::highlight: Et mere generelt pseudo-element til anvendelse af stilarter på fremhævede områder. Dette er nøglen til den nye API's styrke. Du kan nu oprette navngivne fremhævninger og anvende brugerdefineret styling til hver enkelt.
• ::target-text: Repræsenterer den del af et dokument, der er målrettet af et URI-fragment (f.eks. #section-title). Det giver dig mulighed for at style den del af siden, som brugeren rullede til via et link.
• ::spelling-error: Repræsenterer tekst, der er identificeret af brugeragenten som indeholdende stavefejl. Tilbyder stylingkontrol over stavefejlsindikatorer.
• ::grammar-error: Repræsenterer tekst, der er identificeret af brugeragenten som indeholdende grammatiske fejl. Tilbyder stylingkontrol over grammatiske fejlindikatorer.

::highlight pseudo-elementet er arbejdshesten i API'en. Det giver dig mulighed for at definere navngivne fremhævninger i CSS og derefter anvende disse fremhævninger på specifikke tekstområder ved hjælp af JavaScript.

Nøglekoncepter: Områder og Fremhævninger

API'en drejer sig om begreberne områder og fremhævninger:

• Område: En sammenhængende del af tekst i dokumentet. Repræsenteret af Range objektet i JavaScript.
• Fremhævning: En navngiven stil, der anvendes på et eller flere områder. Defineret i CSS ved hjælp af ::highlight(highlight-name) pseudo-elementet og manipuleret gennem Highlight og HighlightRegistry API'erne i JavaScript.

Tænk på det på denne måde: et område er 'hvad' (den tekst, du vil fremhæve), og fremhævningen er 'hvordan' (den stil, du vil anvende).

Opsætning af brugerdefinerede fremhævninger med CSS

Det første trin er at definere dine brugerdefinerede fremhævningsstile i CSS. Du gør dette ved hjælp af ::highlight() pseudo-elementet.

            
::highlight(search-result) {
  background-color: yellow;
  color: black;
}

::highlight(important-term) {
  background-color: lightblue;
  font-weight: bold;
}

            

              
                Copy
              
            
          

I dette eksempel har vi defineret to brugerdefinerede fremhævningsstile: search-result og important-term. search-result fremhævningen vil anvende en gul baggrund med sort tekst, mens important-term fremhævningen vil bruge en lyseblå baggrund og fremhæve teksten med fed skrift. Du kan definere alle de CSS-egenskaber, du ønsker, inden for disse fremhævningsstile.

Administrering af fremhævninger med JavaScript

Når du har defineret dine fremhævningsstile i CSS, kan du bruge JavaScript til at anvende dem på specifikke tekstområder. Highlight og HighlightRegistry API'erne leverer værktøjerne til dette.

The HighlightRegistry

HighlightRegistry er et globalt objekt, der administrerer alle fremhævningerne i dokumentet. Du kan få adgang til det via CSS grænsefladen:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Oprettelse af fremhævninger

For at oprette en fremhævning skal du bruge Highlight konstruktøren:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

Oprindeligt har en fremhævning ingen områder tilknyttet. Du skal tilføje områder til fremhævningen ved hjælp af addRange() metoden.

Tilføjelse af områder til en fremhævning

For at tilføje et område til en fremhævning skal du først oprette et Range objekt. Du kan gøre dette ved hjælp af document.createRange() metoden:

            
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

highlight.addRange(range);

            

              
                Copy
              
            
          

Hvor:

• startNode: DOM-noden, hvor området starter.
• startOffset: Tegnforskydningen inden for startNode, hvor området starter.
• endNode: DOM-noden, hvor området slutter.
• endOffset: Tegnforskydningen inden for endNode, hvor området slutter.

Eksempel: Fremhævning af søgeresultater

Lad os sige, at du har en tekstblok, og du vil fremhæve alle forekomster af et søgeord. Her er, hvordan du kan gøre det:

            
function highlightSearchResults(searchTerm, element) {
  const text = element.textContent;
  let index = text.indexOf(searchTerm);

  if (index === -1) {
    return; // Søgeord ikke fundet
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  // Anvend 'search-result' fremhævningsstilen
  highlightRegistry.set('search-result', highlight);
}

const contentElement = document.getElementById('content');
highlightSearchResults('example', contentElement);

            

              
                Copy
              
            
          

Dette kodestykke finder alle forekomster af ordet "example" inden for elementet med ID'et "content" og anvender search-result fremhævningsstilen på dem.

Fjernelse af områder og fremhævninger

Du kan fjerne områder fra en fremhævning ved hjælp af deleteRange() metoden:

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

Du kan også fjerne alle områder fra en fremhævning ved hjælp af clear() metoden:

            
highlight.clear();

            

              
                Copy
              
            
          

For at fjerne en fremhævning helt kan du bruge delete() metoden i HighlightRegistry:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Avancerede anvendelsestilfælde og overvejelser

CSS Custom Highlight API'en er et kraftfuldt værktøj, der kan bruges i en række avancerede scenarier.

Samarbejdsredigering

I samarbejdsredigeringsapplikationer kan du bruge API'en til at fremhæve de ændringer, der er foretaget af forskellige brugere. Hver bruger kan have sin egen brugerdefinerede fremhævningsstil, så du nemt kan se, hvem der har foretaget hvilke ændringer. For eksempel kan en samarbejdsdokumentredigeringsprogram, der bruges af teams i flere lande, bruge forskellige fremhævningsfarver til at repræsentere redigeringer fra teammedlemmer i Japan, Tyskland og Brasilien.

Kodeeditorer

Kodeeditorer kan udnytte API'en til syntaksfremhævning. Forskellige syntakselementer (f.eks. nøgleord, operatorer, kommentarer) kan tildeles forskellige fremhævningsstile. Moderne kodeeditorer har ofte komplekse syntaksfremhævningsregler, og denne API giver mulighed for mere præcis og tilpasselig kontrol end traditionelle metoder.

Tilgængelighed

API'en kan bruges til at forbedre tilgængeligheden. For eksempel kan du fremhæve det aktuelt fokuserede element eller den tekst, der læses af en skærmlæser. Husk at sikre tilstrækkelig farvekontrast mellem fremhævningsbaggrunden og tekstfarven for brugere med synshandicap. WCAG (Web Content Accessibility Guidelines) giver specifikke retningslinjer for farvekontrastforhold.

Internationalisering (i18n) overvejelser

Når du bruger API'en i flersprogede applikationer, skal du være opmærksom på følgende:

• Tekstretning: Sørg for, at dine fremhævningsstile fungerer korrekt med både venstre-til-højre (LTR) og højre-til-venstre (RTL) sprog.
• Orddeling: Forskellige sprog har forskellige regler for orddeling. Sørg for at bruge passende algoritmer til orddeling, når du fremhæver ord eller sætninger.
• Tegnsæt: API'en understøtter Unicode, så du kan fremhæve tekst på ethvert sprog.

Når du f.eks. fremhæver søgeord på arabisk (et RTL-sprog), skal du sikre dig, at fremhævningen visuelt afspejler den korrekte tekstretning. Ligeledes, når du fremhæver nøgleord på japansk, som ikke bruger mellemrum mellem ord, skal du bruge passende morfologisk analyse til at identificere orddeling.

Ydeevneovervejelser

Selvom API'en er kraftfuld, er det vigtigt at være opmærksom på ydeevnen. Oprettelse og administration af et stort antal fremhævninger kan påvirke ydeevnen, især i store dokumenter. Overvej disse tips:

• Optimer Oprettelse af Område: Oprettelse af Range objekter kan være dyrt. Genbrug eksisterende områder, når det er muligt.
• Batch Opdateringer: Når du foretager flere ændringer af fremhævninger, skal du samle dem i en enkelt opdatering for at minimere reflows.
• Lazy Loading: Fremhæv kun den tekst, der er synlig for brugeren. Indlæs yderligere fremhævninger, når brugeren ruller.
• Virtualisering: For meget store dokumenter kan du overveje at bruge virtualiseringsteknikker til kun at gengive den synlige del af dokumentet.

Praktiske eksempler og kodestykker

Eksempel 1: Dynamisk nøgleordsfremhævning

Dette eksempel viser, hvordan man dynamisk fremhæver nøgleord i en tekst baseret på brugerinput. Forestil dig, at en bruger skriver en søgeforespørgsel i en søgeboks; de fremhævede nøgleord opdateres i realtid.

            


  Dette er noget eksempeltekst. Det indeholder nøgleord, som vi vil fremhæve. Vi vil fremhæve nøgleordene baseret på brugerinput.


            

              
                Copy
              
            
          

            
const keywordInput = document.getElementById('keyword-input');
const textContainer = document.getElementById('text-container');

keywordInput.addEventListener('input', () => {
  const keyword = keywordInput.value.trim();
  if (keyword) {
    highlightKeyword(keyword, textContainer);
  } else {
    clearHighlights(textContainer);
  }
});

function highlightKeyword(keyword, element) {
  clearHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(keyword);

  if (index === -1) {
    return;
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + keyword.length);
    highlight.addRange(range);
    index = text.indexOf(keyword, index + 1);
  }

  CSS.highlights.set('dynamic-keyword', highlight);
}

function clearHighlights(element) {
  CSS.highlights.delete('dynamic-keyword');
}

            

              
                Copy
              
            
          

            
::highlight(dynamic-keyword) {
  background-color: rgba(255, 165, 0, 0.5); /* Semi-transparent orange */
  color: black;
}

            

              
                Copy
              
            
          

Eksempel 2: Implementering af en "Find Alle" funktion

Dette eksempel simulerer en "Find Alle" funktion, der ligner dem, der findes i tekstredigeringsprogrammer og IDE'er. Alle forekomster af et søgeord fremhæves samtidigt.

            


  Dette dokument indeholder flere forekomster af søgeordet. Søgeordet vil blive fremhævet i hele dokumentet.
  Dette er en anden forekomst af søgeordet. Her er et andet søgeord.


            

              
                Copy
              
            
          

            
const searchTermInput = document.getElementById('search-term');
const documentContent = document.getElementById('document-content');

searchTermInput.addEventListener('input', () => {
  const searchTerm = searchTermInput.value.trim();
  if (searchTerm) {
    findAll(searchTerm, documentContent);
  } else {
    clearFindAllHighlights(documentContent);
  }
});

function findAll(searchTerm, element) {
  clearFindAllHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(searchTerm);
  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  CSS.highlights.set('find-all', highlight);
}

function clearFindAllHighlights(element) {
  CSS.highlights.delete('find-all');
}

            

              
                Copy
              
            
          

            
::highlight(find-all) {
  background-color: #90EE90; /* LightGreen */
  color: black;
}

            

              
                Copy
              
            
          

Browserkompatibilitet og Polyfills

CSS Custom Highlight API'en er en relativt ny funktion, så browserkompatibiliteten kan variere. Fra slutningen af 2024 nyder den god support i moderne browsere som Chrome, Firefox, Safari og Edge. Det er dog vigtigt at kontrollere de seneste browserkompatibilitetsdata på websteder som "Can I use..." for at sikre, at din målgruppe kan bruge dine funktioner. Hvis du har brug for at understøtte ældre browsere, kan du undersøge polyfills eller alternative tilgange, der efterligner API'ens funktionalitet, selvom de muligvis ikke tilbyder det samme niveau af ydeevne eller nøjagtighed.

Fremtiden for tekstmarkering og fremhævning

CSS Custom Highlight API'en repræsenterer et betydeligt fremskridt inden for webudvikling, der giver udviklere detaljeret kontrol over tekstmarkering og fremhævning. Efterhånden som API'en modnes, og browserunderstøttelsen forbedres, kan vi forvente at se endnu mere innovative anvendelser af denne teknologi. Fra avancerede tekstredigeringsprogrammer til samarbejdsdokumentplatforme er mulighederne uendelige. Denne API giver mulighed for en rigere, mere interaktiv og mere tilgængelig brugeroplevelse. Overvej, hvordan dette kan bruges til at forbedre brugeroplevelser i alt fra internationale nyhedssider til online sprogindlæringsplatforme.

Konklusion

CSS Custom Highlight API'en er et kraftfuldt værktøj til at skabe dynamiske og interaktive brugergrænseflader. Ved at forstå de grundlæggende begreber om områder, fremhævninger og HighlightRegistry kan du udnytte denne API til at opbygge overbevisende brugeroplevelser, der tidligere var vanskelige eller umulige at opnå. Når du udforsker denne API, skal du huske at overveje tilgængelighed, internationalisering og ydeevne for at sikre, at dine applikationer er brugbare og performante for et globalt publikum. Med sin fleksibilitet og kontrol er CSS Custom Highlight API'en klar til at blive en væsentlig del af den moderne webudviklers værktøjskasse.